<template>
  <comForm
    :form-item="formItem"
    :form-data="formData"
    @searchForm="searchFn"
    @clearForm="clearForm"
  ></comForm>
  <comTable
    :selection="true"
    :tableData="tableData"
    :tableHeader="tableHeader"
    :total="pagination.total"
    :currentPage="pagination.pageNo"
    :pageSize="pagination.pageSize"
    @selectChange="selectChange"
    @currentChange="currentChange"
    @changeTableData="changeTableData"
  >
    <template #operator="{ data }">
      <el-button type="primary" @click="addButton(data)">新增</el-button>
      <el-button type="danger" @click="deleteButton(data)">删除</el-button>
    </template>
  </comTable>
</template>

<script setup>
import comForm from "@/components/commonSearchForm/index.vue";
import comTable from "@/components/commonTable";

// 表单配置
let formData = reactive({
  deviceType: "",
  dateInterval: [],
  alertLevel: [],
  eventDescription: "",
});
const optionList = ref([
  {
    label: "Zone one",
    value: "shanghai",
  },
  {
    label: "Zone two",
    value: "beijing",
  },
]);
const formItem = reactive([
  {
    label: "故障元件",
    value: "deviceType",
    width: 6,
    type: "select",
    children: optionList.value,
    placeholder: "请选择故障元件",
  },
  {
    label: "故障类型",
    value: "alertLevel",
    width: 6,
    type: "multipleSelect",
    children: optionList.value,
    placeholder: "请选择录波类型",
  },
  {
    label: "时间",
    value: "dateInterval",
    width: 6,
    type: "datePicker",
  },
  {
    label: "关键字",
    value: "eventDescription",
    width: 6,
    type: "input",
    placeholder: "请输入设备、录波文件关键字",
  },
]);

const searchFn = (obj) => {
  console.log("查询数据", obj);
  formData = obj;
};

const clearForm = (obj) => {
  console.log("清除数据", obj);
  formData = obj;
};

// 表格配置
let tableHeader = ref([
  { prop: "date", label: "日期" },
  { prop: "name", label: "姓名" },
  { prop: "address", label: "地址" },
  { slot: "operator", label: "操作", fixed: "right" },
]);
const tableData = ref([
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los AngelesNo. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los AngelesNo. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "王小虎",
    address: "上海市普陀区金沙江路 1518 弄",
  },
  {
    date: "2016-05-04",
    name: "王小虎",
    address: "上海市普陀区金沙江路 1517 弄",
  },
  {
    date: "2016-05-01",
    name: "王小虎",
    address: "上海市普陀区金沙江路 1519 弄上海市普陀区金沙江路 1519 弄",
  },
  {
    date: "2016-05-03",
    name: "王小虎",
    address: "上海市普陀区金沙江路 1519 弄上海市普陀区金沙江路 1519 弄",
  },
]);
const pagination = ref({
  pageNo: 1,
  pageSize: 10,
  total: 0,
});

const selectChange = (val) => {
  console.log("🚀 ~ 批量选择 -->", val);
};
const addButton = (row) => {
  console.log("新增", row);
};
const deleteButton = (row) => {
  console.log("删除", row);
};

const currentChange = (val) => {
  console.log("[ 点击当前行数据 ]", val);
};

const changeTableData = (pageNum, pageSize) => {
  pagination.pageNo.value = pageNum;
  pagination.pageSize.value = pageSize;
};

onMounted(() => {});
</script>

<style lang="scss" scoped></style>
